<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>拍品详情—可观艺术网</title>
<link href="${ctx }/style/common.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.bidDiv{position:relative;width: 960px;margin: 0 auto;border: 1px solid #ccc;background: #ffffff;margin-top: 20px;}
.newState {position: absolute;top: -5px;left: -5px;z-index: 20;}
.bid_left{width: 342px;float: left;padding-left: 30px;margin: 20px 0px 15px 0px;}
.bid_middle{width: 468px;float: left;margin: 20px 0px 15px 0px;}
.bid_right{width:120px;float: left;background:#f5f5f5;height: 390px;}

.pic_bid{width: 278px;height: 311px;background: center center;margin-left: 11px;margin-top: 11px;}
.pic_bid a{display:block;width:278px;height: 311px;}

.bid_title {font-size: 32px;color: #000000;padding-top: 20px;padding-bottom: 20px;font-family: "黑体";}

.newest_bid{width: 76px;height: 90px;border:1px solid #ccc;cursor: pointer;margin-left: 21px;margin-top: 15px;}

.pamai1Div{margin-top: 5px;z-index: 1;position: relative;}
.pamai2Div{margin-top: 5px;}

.style13 {color: #333333;font-family:宋体;font-size: 13px;line-height: 22px;}
.style19 {color: #FF3300;font-weight: bold;font-size: 18px;line-height: 30px;}
.STYLE23 {color: #666666; font-family:幼圆; font-size: 18px;font-weight: bold;margin: 20px 0px 0px 0px;}

.dszp_footer{position:relative;height: 20px;clear:both;margin: 0px 0px 10px 0px;}
.dszp_footer span{position:absolute;right: 25px;font-family: "宋体";font-size: 12px;}
</style>

<script type="text/javascript" src="${ctx }/js/jquery-1.3.2.js"></script>
</head>

<body>

<%@include file="/commons/head.jsp"%>

<form action="${ctx }/customer/bid!bid_detail.do" method="post" id="searchForm" name="searchForm" style="margin:0px;padding:0px">
	<c:forEach items="${page.result}" var="result" varStatus="status">
		<div class="bidDiv" <c:if test="${status.count == 1 }">style="margin-top: 0px;"</c:if>>
		   <div class="newState" id="newState${ status.index}" <c:if test="${result.bid.newFlag == '1'}">style="display:none"</c:if>>
				<img src="../images/js.png" width="82" height="82"/>
			</div>
			<div class="bid_left">
		         <div style="border: 1px solid #adabac; width: 317px;height: 352px;">
		         	<div style="border: 1px solid #8b898a; width: 300px;height: 333px;margin: 0 auto;margin-top: 9px;">
					      <div style="background-image: url('${img_server }/painting/${result.bid.goods.painting.imageInfo.id }_bid.${result.bid.goods.painting.imageInfo.suffix }');" class="pic_bid" id="bid_img${ status.index}">
				               <a href="${ctx}/front/backgroundAction!showDetail.do?id=${result.bid.goods.painting.id }" target="_blank" id="painting_link${ status.index}"></a>
				          </div>
		         	</div>
		         </div>
			</div>
			<div class="bid_middle">
				<div><strong class="bid_title">拍品：<span id="page_title${ status.index}">${result.bid.goods.painting.painter.name }《${result.bid.goods.painting.title }》</span></strong></div>
				<div>
					<table width="100%" border="0">
						 <tr><td width="136" class="style13">材质：<span id="caiZhi${ status.index}">${result.bid.goods.painting.caiZhi }</span></td>
				            <td width="217" class="style13">尺寸：
				            <c:if test="${result.bid.goods.painting.width != null}"><span id="width${ status.index}">长<fmt:formatNumber value="${result.bid.goods.painting.width }" pattern="0"/></span>cm&nbsp;</c:if><c:if test="${result.bid.goods.painting.hight != null}">宽<span id="height${ status.index}"><fmt:formatNumber value="${result.bid.goods.painting.hight }" pattern="0"/></span>cm&nbsp;</c:if><c:if test="${result.bid.goods.painting.altitude != null}">高<fmt:formatNumber value="${result.bid.goods.painting.altitude }" pattern="0"/>cm</c:if>
				            </td>
          				</tr>
			            <tr>
				            <td class="style13">原创：<a href="${ctx }/front/painterAction!painterDetail.do?id=${result.bid.goods.painting.painter.id }" style="text-decoration: underline;cursor: pointer;">${result.bid.goods.painting.painter.name }</a></td>
				            <td class="style13">拍卖方式：英式</td>
			           </tr>
			          <tr>
			            <td class="style13">物流：卖方承担</td>
			            <td class="style13">提供形式：画心</td>
			          </tr>
			          <tr>
			            <td class="style13">提供方：<span id="provider${ status.index}">${result.bid.goods.painting.provider }</span></td>
			            <td>&nbsp;</td>
			          </tr>
			          <tr>
           				 <td height="49" colspan="2" class="style13">
           				 	<span id="zhengshu_img${ status.index}">
	           				 	<c:choose>
	           				 		<c:when test="${not empty result.bid.goods.painting.zhengshu}">
		           				 		<a href="${img_server }/zhengshu/${result.bid.goods.painting.zhengshu.id }.${result.bid.goods.painting.zhengshu.suffix }" target="_blank"><img src="../images/zs.jpg" width="80" height="26" style="border: 0"/></a>
		           				 	</c:when>
	           				 		<c:otherwise>
	           				 			<img src="../images/zs.jpg" width="80" height="26" style="border: 0"/>
	           				 		</c:otherwise>
	           				 	</c:choose>
           				 	</span>
							&nbsp;&nbsp;
							<a href="${ctx}/front/backgroundAction!showEffect.do?id=${result.bid.goods.painting.id }" target="_blank" id="effect_link${ status.index}">
								<img src="${ctx }/images/bsxg.jpg" width="80" height="26" style="cursor: pointer;border: 0"/>
							</a>
           				 </td>
            		  </tr>
					</table>
				</div>
				<div>
				   <ul style="list-style: none">
						<li class="style19">起拍价￥<span id="beginPrice${ status.index}"><fmt:formatNumber value="${result.bid.beginPrice }" type="number" pattern="#.##"/></span>元</li>
						<li class="style19" id="current_bidrecord${ status.index}">
							<c:if test="${result.bid.currentBidRecord != null}">
								<c:choose>
									<c:when test="${result.bid.bid_status == 2 }">
										当前价￥<fmt:formatNumber value="${result.bid.currentBidRecord.bidPrice }" type="number" pattern="#.##"/>元，受买人${result.bid.currentBidRecord.customerInfo.displayName }
									</c:when>
									<c:otherwise>
										当前价￥<fmt:formatNumber value="${result.bid.currentBidRecord.bidPrice }" type="number" pattern="#.##"/>元，出价人${result.bid.currentBidRecord.customerInfo.displayName }
									</c:otherwise>
								</c:choose>
							</c:if>
						</li>
					</ul>
				</div>
				<!-- 正在拍卖 begin  -->
				<div id="pamai1Div${ status.index}" class="pamai1Div" <c:if test="${result.bid.newFlag == '0'}">style="display:none;"</c:if>>
					<img src="../images/paimai/pamai1.jpg" border="0" usemap="#Image_pamaiMap${ status.index}" id="Image_pamai${ status.index}" />
					<div style="z-index: 20;position:absolute;height: 23px;width: 95px;left: 53px;top: 16px; ">
						<input type="text" name="new_price${ status.index}" 
							<c:choose>
								<c:when test="${result.bid.currentBidRecord != null}">
									value="${result.bid.currentBidRecord.bidPrice }"
								</c:when>
								<c:otherwise>
									value="${result.bid.beginPrice }"
								</c:otherwise>
							</c:choose>
						id="new_price${ status.index}" style="width: 93px;height: 19px;border: 0px"  readonly="readonly"/>
				    </div>
				</div>
				<!-- 正在拍卖  end  -->
				<!-- 拍卖结束   begin  -->
				<div id="pamai2Div${ status.index}" class="pamai2Div" <c:if test="${result.bid.newFlag == '1'}"> style="display: none;" </c:if>>
					<img src="../images/paimai/pamai2.jpg" border="0" id="Image_pamai${ status.index}" />
				</div>
				<!-- 拍卖结束  end  -->
			     
			    <!-- 拍卖剩余时间    begin  -->
				<div class="STYLE23">
					 <div>剩余时间：<span id="left_time${status.index}" >0天0小时0分0秒</span>
					 		<!-- 当前拍品状态，是否过期  -->
						 <input type="hidden" value="${result.bid.newFlag }" id="new_flag${status.index}"/>
						 	<!-- 当前拍品ID  -->
						<input type="hidden" name="bid_id${ status.index}" id="bid_id${ status.index}" value="${result.bid.id }"/>
					 </div>
				</div>
			    <!-- 拍卖剩余时间    end  -->
			</div>
			<div class="bid_right">
				<c:forEach items="${result.newestBidList}" var="b" varStatus="s">
					<div class="newest_bid">
						<div style="margin-top:8px;margin-left:8px;width: 60px;height: 74px;background-position: center center;background-image: url('${img_server }/painting/${b.goods.painting.imageInfo.id }_s.${b.goods.painting.imageInfo.suffix }');">
							<a style="width: 60px;height: 74px;display: block;" href="javascript:switchBid(${ status.index},${ s.index})"></a>
						</div>
					</div>
				</c:forEach>
			</div>
			<div style="clear: both;"></div>
		</div>
	</c:forEach>
	<div style="width: 960px;margin: 0 auto;margin-top: 5px;"><div class="dszp_footer"><span><jsp:include page="/commons/paging_footer.jsp"/></span></div></div>
</form>

<%@include file="/commons/foot.jsp" %>

<div id="_link_div_win" style="display:none;z-index:1001;margin:auto;position: absolute;font-size: 12px;"></div>

<script type="text/javascript">

var endtimes=new Array();//结束时间

var nowtimes;
function givetime(){

	nowtimes=new Date();
	window.setTimeout("DownCount()",1000);
}

function DownCount(){

	nowtimes=Number(nowtimes)+1000;
	var len = endtimes.length;

	for(var i=0;i< len;i++)
	{
		var theDay = new Date(endtimes[i]);
		theDay = theDay++;
		if(theDay<=nowtimes)
		{
			document.getElementById("left_time"+i).innerHTML = "0天00小时00分00秒";
		}
		else{
			show_date_time(endtimes[i],i);
		}
	}
	window.setTimeout("DownCount()",1000);
}

function show_date_time(date_str,index){

	BirthDay=new Date(date_str);

	today=new Date();
	timeold=( BirthDay.getTime() - today.getTime());
	sectimeold=timeold/1000;
	secondsold=Math.floor(sectimeold);
	
	msPerDay=24*60*60*1000;
	e_daysold=timeold/msPerDay;
	daysold=Math.floor(e_daysold);
	
	e_hrsold=(e_daysold-daysold)*24;
	hrsold=Math.floor(e_hrsold);
	
	e_minsold=(e_hrsold-hrsold)*60;
	minsold=Math.floor((e_hrsold-hrsold)*60);
	
	seconds=Math.floor((e_minsold-minsold)*60);

	var target_obj = document.getElementById("left_time"+index);

	if(typeof target_obj != "undefined"){
		target_obj.innerHTML= daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒"; 
	}
}

/*** 出价 ***/
function bid(index){

	var bid_id = $("#bid_id"+index).val();
	var new_price = $("#new_price"+index).val();

	var page_title = $("#page_title"+index).html();
	var remain_time = $("#left_time"+index).html();
	page_title = escape(escape(page_title));
	remain_time = escape(escape(remain_time));
	var link_url = '${ctx}/customer/bid!bid_confirm.do?bid_id='+bid_id+'&new_price='+new_price+'&page_title='+page_title+'&remain_time='+remain_time;

	var width = 383;
	var height = 265;
	var content = '<iframe src="'+link_url+'" width="383" height="264" frameborder="0" marginheight="0" marginwidth="0">';
	createPopupDiv("_link_div_win",width,height,content);
}

/**** 距滚动条顶部距离 *******/
function getScrollTop(){
	var scrollPos; 
	if (typeof window.pageYOffset != 'undefined') { 
	   scrollPos = window.pageYOffset; 
	} 
	else if (typeof document.compatMode != 'undefined' && 
	     document.compatMode != 'BackCompat') { 
	   scrollPos = document.documentElement.scrollTop; 
	} 
	else if (typeof document.body != 'undefined') { 
	   scrollPos = document.body.scrollTop; 
	}

	return  scrollPos;
}

function createPopupDiv(divId,width,height,content){

	var divWindow = document.getElementById(divId);
	divWindow.style.display = "block";
	divWindow.style.width = width +"px";
	divWindow.style.height  = height + "px" ;
	var scrollTop = getScrollTop() ;
	divWindow.style.left = (document.body.offsetWidth - width)/2 + document.body.scrollLeft + "px";
	//divWindow.style.top  = (document.body.offsetHeight - height)/2 + document.body.scrollTop + "px";
	divWindow.style.top  = (window.screen.availHeight - height) / 2 + scrollTop + "px";
	divWindow.innerHTML = content;
}

function closePopupDiv(divId){

	var divWindow = document.getElementById(divId);
	divWindow.style.display = "none";
}

/********向服务器轮询最新价格 ************/

var newest_price = 0.0;//当前最新价格
function live_price(index){

	var bid_id = $("#bid_id"+index).val();
	
	$.ajax( {
		type : "POST",
		url : "${ctx }/customer/bid!queryCurrentBid.do?bid_id="+ bid_id,
		timeout : 6000,
		async : false, //ajax同步
		success : function(data, textStatus) {
			if(data != ""){
				var response_data = eval("("+data+")");
				var price = response_data.bidPrice;
				var username = response_data.username;
				//var count = response_data.count; //参与人数 
				newest_price = price;
				$("#current_bidrecord"+index).html("当前价￥"+price+"元，出价人"+username);
			}else{
				newest_price = $("#new_price"+index).val();
			}
		}
	});
}

    /************ 预修改价格(本地修改,不提交服务器 )  *************/
function refresh_price(flag,index){
		
	if(newest_price ==  0.0){
		live_price(index);
	}
	
	var _price = 100;
	var old_price = $("#new_price"+index).val();
	var new_price = Number(old_price);
	if(flag =='down'){
		new_price = new_price - _price;
		if( new_price < newest_price ){
			new_price = newest_price;
			return;
		}
	}
	else if(flag =='up'){
		new_price = new_price + _price;
	}else{
		new_price = 0.00;
	}
	
	new_price = Math.round(new_price * 100)/100
	
	$("#new_price"+index).val(new_price);
}

function init(){
	
	<c:forEach items="${page.result}" var="result" varStatus="status">
		var index = ${status.index};
		var date_str = '<fmt:formatDate value="${result.bid.endTime }" pattern="MM/dd/yyyy HH:mm:ss" />';
		endtimes[index] = date_str;
	</c:forEach>

	givetime();
}

init();

var jsonArrayStr = ${requestScope.jsonArrayStr}

/***** 切换拍品  *******/
function switchBid(index_1,index_2){

	 var _this = jsonArrayStr[index_1][index_2];

	 /****** 最新/结束 图标标示 begin   *********/
	 if(_this.newFlag == '0'){
		 $("#newState"+index_1).html('<img src="../images/js.png" width="82" height="82"/>');
		 $("#newState"+index_1).css("display","block");
		 $("#pamai1Div"+index_1).css("display","none");
		 $("#pamai2Div"+index_1).css("display","block");
		 $("#Image_pamai"+index_1).css("usemap","#Image_pamaiMap"+index_1);
	 }
	 else{
		 $("#newState"+index_1).css("display","none");
		 $("#pamai1Div"+index_1).css("display","block");
		 $("#pamai2Div"+index_1).css("display","none");
		 $("#Image_pamai"+index_1).css("usemap","");
	 }
	 /****** 最新/结束 图标标示 end   *********/
	
	 $("#bid_img"+index_1).css("background-image","url(${img_server }/painting/"+_this.imgPath+")");
	 $("#painting_link"+index_1).attr("href","${ctx}/front/backgroundAction!showDetail.do?id="+_this.paintingId);
	 $("#page_title"+index_1).html(_this.painterName+"《"+_this.paintingTitle+"》");
	 $("#caiZhi"+index_1).html(_this.caiZhi);
	 $("#width"+index_1).html(_this.width);
	 $("#height"+index_1).html(_this.height);
	 $("#provider"+index_1).html(_this.provider);
	 $("#effect_link"+index_1).attr("href","${ctx}/front/backgroundAction!showEffect.do?id="+_this.paintingId);
	 $("#beginPrice"+index_1).html(_this.beginPrice);
	 $("#bid_id"+index_1).val(_this.id);

	 /*** 证书 begin ****/
	 if(_this.zhengshu_id != 0){
		$("#zhengshu_img"+index_1).html('<a href="${img_server }/zhengshu/'+_this.zhengshu_imgPath+'" target="_blank"><img src="../images/zs.jpg" width="80" height="26" style="border: 0"/></a>');
	 }
	 else{
		 $("#zhengshu_img"+index_1).html('<img src="../images/zs.jpg" width="80" height="26" style="border: 0"/>');
	 }
	 /*** 证书  end ****/

	  /*** 最新出价  begin ****/
	 if(_this.bidPrice != 0){
		 if(_this.bid_status == 2){
			 $("#current_bidrecord"+index_1).html("当前价￥"+_this.bidPrice+"元，受买人"+_this.displayName);
		 }
		 else{
			 $("#current_bidrecord"+index_1).html("当前价￥"+_this.bidPrice+"元，出价人"+_this.displayName);
		 }
		 $("#new_price"+index_1).val(_this.bidPrice);
	 }
	 else{
		 $("#current_bidrecord"+index_1).html("");
		 $("#new_price"+index_1).val(_this.beginPrice);
	 }
	 /*** 最新出价  end ****/
	 
	 endtimes[index_1] = _this.endTime;
}

</script>
<c:forEach items="${page.result}" var="result" varStatus="status">
	<map name="Image_pamaiMap${ status.index}" id="Image_pamai1Map${ status.index}">
	  <area shape="rect" coords="30,15,53,40" href="javascript:refresh_price('down',${ status.index})"/>
	  <area shape="rect" coords="145,15,168,40" href="javascript:refresh_price('up',${ status.index})"/>
	  <area shape="rect" coords="200,1,340,55" href="javascript:bid(${ status.index})"/>
	</map>
</c:forEach>
</body>
</html>